<template>
  <div class="home">
    <personal-setting
      class="personal-setting"
      :setting="systemConfig"
    >
    </personal-setting>
    <div class="appTitle">
      <div class="appName">{{ appName }}</div>
      <div class="text">{{ appTag }}</div>
    </div>
    <div class="bottom">
      <div @click="goto('独立网页')" class="item">
        <div class="img1 img"></div>
        <div class="text">独立网页</div>
      </div>
      <div @click="goto('系统设置')" class="item">
        <div class="img2 img"></div>
        <div class="text">系统设置</div>
      </div>
      <div @click="goto('yzt')" class="item">
        <div class="img3 img"></div>
        <div class="text">管制"一张图"</div>
      </div>
      <div @click="goto('sjsb')" class="item">
        <div class="img4 img"></div>
        <div class="text">数据上报</div>
      </div>
    </div>
  </div>
</template>

<script>
import PersonalSetting from '@c/Layout/PersonalSetting'
import authService from '@/api/authService'
import { mapState } from 'vuex'
import config from '@/config/defaultSettings'

const modulesName = [
  '独立网页',
  '系统设置',
  '投资平台',
  '规划许可',
  '综合查询',
  '数据上报'
]
export default {
  name: 'HomeA',
  data () {
    return {
      appName: '"智管系统"应用场景',
      appTag: '简洁·规范·细节',
      systemConfig: config,
      handMenuMap: {},
    }
  },
  components: {
    PersonalSetting
  },
  created () {
    // console.log(this.handMenuMap)
    Object.keys(this.menuMap).map(key => {
      this.menuMap[key].forEach(item => {
        const element = modulesName.includes(item.name)
        // console.log(1, element)
        // console.log(2, item)
        if (element) {
          this.handMenuMap[item.name] = item
        }
      })
    })
  },
  mounted () {
    // canvasBg('canvas-home')
  },
  computed: {
    ...mapState({
      menuMap: state => state.permission.menuMap
    })
  },
  methods: {
    // 退出事件
    logout () {
      authService.logout().then(() => {
        location.reload()
      })
    },
    enterDetail (routerName, params, query) {
      const { href } = this.$router.resolve({
        name: routerName,
        params: params,
        query
      })
      window.open(href, '_blank')
    },
    onChange (checkedValues) {
      console.log('checked = ', checkedValues)
    },
    goto (type) {
      if (type === 'none') {
        this.$message.warning('该模块正在建设中，请等待上线后再使用。')
        return
      }
      const model = this.handMenuMap[type]
      if (!model) {
        this.$message.warning('您没有进入该模块的权限，请联系管理员开通！')
        return
      }
      if (model.routerName) {
        if (model.children && model.name === '规划许可') {
          model.children.forEach(item => {
            if (item.name.indexOf('在办') > -1) {
              this.$router.push({ name: item.routerName })
            }
          })
          // pushByWidgetName('待办件', this)
        } else {
          // pushByWidgetName('1', this)
          this.$router.push({ name: model.routerName })
        }
      } else if (model.url) {
        window.open(model.url)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.personal-setting {
  position: absolute;
  right: 25px;
  top: 24px;
}

.home {
  width: 100%;
  height: 100%;
  background: url("../../assets/img/home/a/background.jpg") no-repeat;
  background-size: 100% 100%;
  padding-top: 180px;
  display: flex;
  flex-direction: column;

  .appTitle {
    text-align: left;
    margin-left: 100px;
    width: 100%;
    height: 30%;
    color: white;
    float: left;

    .appName {
      font-size: 50px;
      font-weight: 700;
      letter-spacing: 2px;
      font-family: Alimama ShuHeiTi, Alimama ShuHeiTi-Bold, serif;
    }

    .text {
      font-family: PingFang SC, PingFang SC-Regular, serif;
      font-size: 25px;
      line-height: 75px;
      letter-spacing: 3px;
      margin-left: 33px;
    }
  }

  .bottom {
    width: 100%;
    height: 30%;
    margin-top: 14%;
    padding: 0 15% 0 17%;
    display: flex;
    justify-content: space-around;

    .item:hover {
      transform: translateY(-40px);
      background: url("../../assets/img/home/a/btn_hover.png");
      background-size: 100% 100%;
    }

    .item {
      width: 220px;
      height: 190px;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 30px;
      transition: all .25s ease-in;

      .text {
        width: 200px;
        height: 65px;
        font-family: PingFang SC, PingFang SC-Regular, serif;
        font-weight: 400;
        text-align: center;
        color: #ffffff;
        line-height: 65px;
        font-size: 23px;
      }

      div {
        margin-left: -10px;
      }

      .img {
        width: 75*0.9px;
        height: 75*0.9px;
      }

      .img1 {
        background: url("../../assets/img/home/a/sjsb.png");
        background-size: 100% 100%;
      }

      .img2 {
        background: url("../../assets/img/home/a/sjsb.png");
        background-size: 100% 100%;
      }

      .img3 {
        background: url("../../assets/img/home/a/sjsb.png");
        background-size: 100% 100%;
      }

      .img4 {
        background: url("../../assets/img/home/a/sjsb.png");
        background-size: 100% 100%;
      }
    }
  }
}
</style>
